<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="css/swiper-bundle.min(2).css">
    <script src="./js/swiper-bundle.min(2).js"></script>
    <title>家居家纺</title>
    <style>
        li {
            list-style: none;
        }
        
        ul {
            margin: 0;
            padding: 0;
        }
        
        .row {
            margin: 0;
        }
        
        @media (min-width:576px) {
            .container {
                max-width: 576px;
                padding: 0;
            }
        }
        
        @media (min-width:768px) {
            .container {
                max-width: 768px;
                padding: 0;
            }
        }
        
        @media (min-width:992px) {
            .container {
                max-width: 992px;
                padding: 0;
            }
        }
        
        @media (min-width:1200px) {
            .container {
                max-width: 1200px;
                padding: 0;
            }
        }
        
        .textiles_list_img img {
            width: 100%;
        }
        
        .textiles_list_box span,
        p {
            color: #999999;
        }
        
        .swiper-slide img {
            width: 48%;
        }
        
        .swiper-slide {
            display: flex;
            justify-content: space-between;
        }
        
        .textiles_list_box p {
            margin: 50px 0;
        }
        
        .textiles {
            padding: 50px 0;
        }
        
        .textiles_list_img {
            overflow: hidden;
        }
        
        .textiles_list_img:hover img {
            transition: .8s;
            transform: scale(1.2);
        }
        
        .swiper-pagination-bullet-active {
            background-color: #ffffff
        }
        
        @media(max-width:768px) {
            .textiles_list_img {
                margin-top: 10px;
            }
            .textiles_list_box h2 {
                font-size: 28px;
            }
        }
    </style>
</head>

<body>
    <div class="textiles">
        <div class="container">
            <div class="textiles_list">
                <ul class="row">
                    <li class="col-lg-6">
                        <div class="textiles_list_box">
                            <h2>品质是家纺的首要原则</h2>
                            <span>QUALTY IS THE FIRST PRINCIPLE</span>
                            <p>我们做到了在提高性价比的同时坚决不降低产品品质。从胚布到印染到缝制都在同一个大平台下进行，每一道程序均严格把控，产品品质更优于市场上的同类产品。</p>
                            <div class="textiles_list_box_img">
                                <div class="swiper-container">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <img src="img/textiles/img2.webp" alt="">
                                            <img src="img/textiles/img3.webp" alt="">

                                        </div>
                                        <div class="swiper-slide">
                                            <img src="img/textiles/img2.webp" alt="">
                                            <img src="img/textiles/img3.webp" alt="">
                                        </div>
                                    </div>
                                    <!-- 如果需要分页器 -->
                                    <div class="swiper-pagination"></div>

                                    <!-- 如果需要导航按钮 -->
                                    <div class="swiper-button-prev swiper-button-white"></div>
                                    <div class="swiper-button-next swiper-button-white"></div>


                                </div>
                                <script>
                                    var mySwiper = new Swiper('.swiper-container', {
                                        loop: true, // 循环模式选项
                                        autoplay: true, //等同于以下设置
                                        autoplay: {
                                            delay: 2000,
                                            stopOnLastSlide: false,
                                            disableOnInteraction: false,
                                        },
                                        // 如果需要分页器
                                        pagination: {
                                            el: '.swiper-pagination',
                                        },

                                        // 如果需要前进后退按钮
                                        navigation: {
                                            nextEl: '.swiper-button-next  .swiper-button-white',
                                            prevEl: '.swiper-button-prev  .swiper-button-white',
                                        },

                                    })
                                </script>
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-6">
                        <div class="textiles_list_img">
                            <img src="img/textiles/img1.webp" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>